/**
 * 地域选择组件
 */

import React from 'react';
import Group from './Group.jsx';

import filterStyle from './Filter.less';

import SelectField from 'material-ui/lib/select-field';
import MenuItem from 'material-ui/lib/menus/menu-item';

const noop = function() { };
const selectFieldStyle = {
	width: 150
};

export default class AreaGroup extends React.Component {

	// 设置属性默认值
	static defaultProps = {
		provinces: [], 
		onProvinceChange: noop,
		cities: [], 
		onCityChange: noop,
		counties: [], 
		onCountyChange: noop,
		schools: [],
		onSchoolChange: noop,
	};

	constructor(props) {
		super(props);
	}

	// 处理选择变化
	handleChange(key, value) {
		if (key == 'province') {
			let { onProvinceChange } = this.props;
			onProvinceChange(value);
		} else if (key == 'city') {
			let { onCityChange } = this.props;
			onCityChange(value);
		} else if (key == 'county') {
			let { onCountyChange } = this.props;
			onCountyChange(value);
		} else if (key == 'school') {
			let { onSchoolChange } = this.props;
			onSchoolChange(value);
		}
	}

	buildMenuItems(source) {
		let items = [
			<MenuItem 
				primaryText='全部'
				key={-1} 
				value='-1' />
		];

		let newSource = source.map((item, index) => 
			<MenuItem 
				primaryText={item.name} 
				key={index} 
				value={item.enum} />)

		return items.concat(newSource);
	}

	render() {
		let { provinces, cities, counties, schools, ...others } = this.props;
		let { selectedProvince, selectedCity, selectedCounty, selectedSchool } = others;

		return (
			<Group name='地域'>
				<div className={filterStyle.inline}>
					<SelectField
						style={selectFieldStyle}
						value={selectedProvince}
						onChange={(event, index, value) => { 
							this.handleChange('province', value)
						}}
						floatingLabelText='省份'
					>
						{ this.buildMenuItems(provinces) }
					</SelectField>
					<SelectField
						style={selectFieldStyle}
						value={selectedCity}
						onChange={(event, index, value) => { 
							this.handleChange('city', value)
						}}
						floatingLabelText='市'
					>
						{ this.buildMenuItems(cities) }
					</SelectField>
					<SelectField
						style={selectFieldStyle}
						value={selectedCounty}
						onChange={(event, index, value) => { 
							this.handleChange('county', value)
						}}
						floatingLabelText='县区'
					>
						{ this.buildMenuItems(counties) }
					</SelectField>
					<SelectField
						value={selectedSchool}
						onChange={(event, index, value) => { 
							this.handleChange('school', value)
						}}
						floatingLabelText='学校'
					>
						{ this.buildMenuItems(schools) }
					</SelectField>
				</div>
			</Group>
		);
	}
}